import React, {Component} from 'react';
// import qs from 'querystring'

const DetailData = [
    {id: '01', content: '你好，中国'},
    {id: '02', content: '你好，山硅谷'},
    {id: '03', content: '你好，未来的自己'},
]

class Detail extends Component {

    render() {
        console.log(this.props)
        //接收params参数
        // const {id,title} = this.props.match.params

        //接收search参数
        // const {search}=this.props.location
        // const{id,title}=qs.parse(search.slice(1))

        //接收state参数
        const {id, title} = this.props.location.state || {} //state参数存在history里面，刷新不会丢，但是清空缓存会丢失。因为state参数清缓存(历史记录就会被清掉)会丢参数，所以要用||{}来保证清缓存后不会报错

        const findResult = DetailData.find(item => item.id === id) || {} //state参数存在history里面，刷新不会丢，但是清空缓存会丢失。因为state参数清缓存(历史记录就会被清掉)会丢参数，所以要用||{}来保证清缓存后不会报错

        return (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        );
    }
}

export default Detail;